<template>
  <!-- 达人详情-粉丝分析 5 125 -->
  <div id="VideoDetail" class="video_detail">
    <template v-if="vipRootObj[5][125].owner">
      <div class="time_slot">
        <radio_group01 :radio_values="['近7天', '30天', '90天']" v-model="KindName" class="tab01" />
        <div class="optionsBox">
          <el-date-picker
            class="long_time"
            v-model="liveTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            prefix-icon="el-icon-arrow-down"
            unlink-panels
            :clearable="false"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @change="onPick1"
          ></el-date-picker>
        </div>
      </div>
      <section class="detail_first-wrap">
        <div class="live_top">
          <div class="line"></div>
          <div class="text">视频数据</div>
        </div>
        <ul class="preview_list" v-if="!loading1">
          <li class="preview_list-box">
            <div>{{ videoData.awemeCount }}</div>
            <div>视频数</div>
          </li>
          <li class="preview_list-box">
            <div>{{ videoData.awemeProCount }}</div>
            <div>带货视频数</div>
          </li>
          <li class="live_list-line"></li>
          <li class="preview_list-box">
            <div>{{ videoData.favoriteCount }}</div>
            <div>点赞数</div>
          </li>
          <!-- <li class="live_list-line"></li>
          <li class="preview_list-box">
            <div>{{ videoData.ffp }} : 1</div>
            <div>赞粉比</div>
          </li>-->
        </ul>
        <div
          v-loading="loading1"
          v-if="loading1"
          class="loading"
          element-loading-spinner="el-icon-loading"
        ></div>
      </section>
      <section class="detail_second-wrap">
        <div class="second_left">
          <div class="live_top">
            <div class="line"></div>
            <div class="text">视频发布时间统计</div>
          </div>
          <div class="second_left-echart m_t">
            <BarChart01
              v-if="videoEdata.y.length != 0"
              :xData="videoEdata.x"
              :series1="videoEdata.y"
              name1="视频发布时间统计"
              name2="视频个数"
            />
            <div class="no_data" v-else>
              <img src="@/assets/shi/zanwushuju.png" alt />
              暂无数据
            </div>
          </div>
        </div>
        <div class="second_right">
          <div class="live_top">
            <div class="line"></div>
            <div class="text">视频时长分布</div>
          </div>
          <div class="second_right-echart m_t">
            <BigPie v-if="videoPdata.length != 0" :valueData="videoPdata" Etitle="视频时长分布" />
            <div class="no_data" v-else>
              <img src="@/assets/shi/zanwushuju.png" alt />
              暂无数据
            </div>
          </div>
        </div>
      </section>
      <section class="detail_second-wrap">
        <div class="second_left">
          <div class="live_top">
            <div class="line"></div>
            <div class="text">点赞趋势</div>
          </div>
          <div class="second_left-echart">
            <KChart
              v-if="PraiseData.x.length != 0 && !loading2"
              :xData="PraiseData.x"
              :series1="PraiseData.y2"
              name1="新增点赞数"
            />
            <div class="no_data" v-if="PraiseData.x.length == 0 && !loading2">
              <img src="@/assets/shi/zanwushuju.png" alt />
              暂无数据
            </div>
            <div
              v-loading="loading2"
              v-if="loading2"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
          <div class="comment" v-if="videoListData && videoListData.length">
            <div class="comment_box">
              <div class="comment_box-tit">最高点赞视频</div>
              <div class="comment_box-info">
                <div class="info_left">
                  <div class="img-box">
                    <img :src="highestData.mF_ThumPic" @click="Routinghop(highestData.mF_AwemeId)" />
                  </div>
                  <div
                    class="text"
                    @click="Routinghop(highestData.mF_AwemeId)"
                  >{{ highestData.mF_Title }}</div>
                </div>
                <div class="info_right">
                  <div class="num-box">
                    <div class="text">
                      点赞数
                      <!-- <img src="@/assets/shi/praise.png" alt="" />点赞数 -->
                    </div>
                    <div class="num">{{ highestData.mF_Favorite }}</div>
                  </div>
                  <div class="num-box">
                    <div class="text">评论数</div>
                    <div class="num">{{ highestData.mF_Comment }}</div>
                  </div>
                  <div class="num-box">
                    <div class="text">
                      转发数
                      <!-- <img src="@/assets/shi/praise.png" alt="" />点赞数 -->
                    </div>
                    <div class="num">{{ highestData.mF_Share }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="second_right">
          <div class="live_top">
            <div class="line"></div>
            <div class="text">评论趋势</div>
          </div>
          <div class="second_right-echart">
            <KChart
              v-if="commentData.x.length != 0 && !loading2"
              :xData="commentData.x"
              :series1="commentData.y2"
              name1="新增评论数"
            />
            <div class="no_data" v-if="commentData.x.length == 0 && !loading2">
              <img src="@/assets/shi/zanwushuju.png" alt />
              暂无数据
            </div>
            <div
              v-loading="loading2"
              v-if="loading2"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
          <div class="comment" v-if="videoListData && videoListData.length">
            <div class="comment_box">
              <div class="comment_box-tit">最多评论视频</div>
              <div class="comment_box-info">
                <div class="info_left">
                  <div class="img-box">
                    <img :src="highestData.mC_ThumPic" @click="Routinghop(highestData.mC_AwemeId)" />
                  </div>
                  <div
                    class="text"
                    @click="Routinghop(highestData.mC_AwemeId)"
                  >{{ highestData.mC_Title }}</div>
                </div>
                <div class="info_right">
                  <div class="num-box">
                    <div class="text">
                      评论数
                      <!-- <img src="@/assets/shi/comment.png" alt="" />评论数 -->
                    </div>
                    <div class="num">{{ highestData.mC_Comment }}</div>
                  </div>
                  <div class="num-box">
                    <div class="text">点赞数</div>
                    <div class="num">{{ highestData.mC_Favorite }}</div>
                  </div>
                  <div class="num-box">
                    <div class="text">转发数</div>
                    <div class="num">{{ highestData.mC_Share }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="detail_last-list">
        <div class="live_top">
          <div class="line"></div>
          <div class="text">视频列表</div>
        </div>
        <div class="last_list-warp">
          <div class="searchBox">
            <el-input
              v-model="searchInput"
              placeholder="请输入视频名称关键词搜索"
              @keyup.enter.native="toSearch()"
            ></el-input>
            <div class="imgBox" @click="toSearch()">
              <!-- <img src="@/assets/wang/talentCompare/search.png" /> -->
            </div>
          </div>
          <div class="checkbox">
            <el-checkbox v-model="detailVideo">屏蔽已删除视频</el-checkbox>
            <el-checkbox v-model="goodsVideo">带货视频</el-checkbox>
          </div>
        </div>
        <div class="last_list">
          <section ref="capture">
            <table class="table" ref="tableEl">
              <thead>
                <tr ref="th_tr_El">
                  <!-- 排序 1 发布时间 2 视频时长 3 点赞数量 4 评论数量 5 转发数量 -->
                  <th>视频</th>
                  <th
                    @click="sort_fun(true, 2)"
                    v-if="orderType == 1 && sortValue == 2"
                    class="cursor"
                  >
                    时长
                    <img ml src="@/assets/meng/down_up.png" v-if="orderType == 1 && sortValue == 2" />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th v-else @click="sort_fun(false, 2)" class="cursor">
                    时长
                    <img src="@/assets/meng/up_down.png" v-if="orderType == 0 && sortValue == 2" />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th
                    @click="sort_fun(true, 1)"
                    v-if="orderType == 1 && sortValue == 1"
                    class="cursor"
                  >
                    发布时间
                    <img
                      src="@/assets/meng/down_up.png"
                      v-if="orderType == 1 && sortValue == 1"
                    />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th v-else @click="sort_fun(false, 1)" class="cursor">
                    发布时间
                    <img
                      src="@/assets/meng/up_down.png"
                      v-if="orderType == 0 && sortValue == 1"
                    />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <!-- 预估销量+预估销售额 -->
                  <th
                    @click="sort_fun(true, 6)"
                    v-if="orderType == 1 && sortValue == 6"
                    class="cursor"
                  >
                    预估销量
                    <img
                      src="@/assets/meng/down_up.png"
                      v-if="orderType == 1 && sortValue == 6"
                    />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th v-else @click="sort_fun(false, 6)" class="cursor">
                    预估销量
                    <img
                      src="@/assets/meng/up_down.png"
                      v-if="orderType == 0 && sortValue == 6"
                    />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th
                    @click="sort_fun(true, 7)"
                    v-if="orderType == 1 && sortValue == 7"
                    class="cursor"
                  >
                    预估销售额
                    <img
                      src="@/assets/meng/down_up.png"
                      v-if="orderType == 1 && sortValue == 7"
                    />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th v-else @click="sort_fun(false, 7)" class="cursor">
                    预估销售额
                    <img
                      src="@/assets/meng/up_down.png"
                      v-if="orderType == 0 && sortValue == 7"
                    />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <!--  -->
                  <th
                    @click="sort_fun(true, 3)"
                    v-if="orderType == 1 && sortValue == 3"
                    class="cursor"
                  >
                    点赞数
                    <img src="@/assets/meng/down_up.png" v-if="orderType == 1 && sortValue == 3" />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th v-else @click="sort_fun(false, 3)" class="cursor">
                    点赞数
                    <img src="@/assets/meng/up_down.png" v-if="orderType == 0 && sortValue == 3" />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th
                    @click="sort_fun(true, 4)"
                    v-if="orderType == 1 && sortValue == 4"
                    class="cursor"
                  >
                    评论数
                    <img src="@/assets/meng/down_up.png" v-if="orderType == 1 && sortValue == 4" />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th v-else @click="sort_fun(false, 4)" class="cursor">
                    评论数
                    <img src="@/assets/meng/up_down.png" v-if="orderType == 0 && sortValue == 4" />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th
                    @click="sort_fun(true, 5)"
                    v-if="orderType == 1 && sortValue == 5"
                    class="cursor"
                  >
                    转发数
                    <img src="@/assets/meng/down_up.png" v-if="orderType == 1 && sortValue == 5" />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th v-else @click="sort_fun(false, 5)" class="cursor">
                    转发数
                    <img src="@/assets/meng/up_down.png" v-if="orderType == 0 && sortValue == 5" />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in videoListData" :key="index + '_' + item.authorId">
                  <td>
                    <div class="rightBox">
                      <div class="picture">
                        <!-- <img :src="item.thumPic" alt="" /> -->
                        <img :src="item.thumPic" v-if="item.isDelete == 0" />
                        <img class="detail" src="@/assets/shi/diteil6.png" v-else />
                        <a :href="item.url" target="_blank" class="picture_href">
                          <img src="@/assets/meng/hot_video18.png" />
                        </a>
                      </div>
                      <div
                        class="info"
                        @click="
                          dialog = false;
                          active_name01 = '0';
                          video_id = item.awemeId;
                          Routinghop(item.awemeId);
                        "
                      >
                        <div v-if="item.isDelete == 0" class="info_top">
                          <img
                            v-if="item.isPro == 1"
                            class="info_top-img"
                            src="@/assets/shi/chart_gouwuche.png"
                            alt
                          />
                          {{ item.title }}
                        </div>
                        <div v-else class="info_detail-name">已删除或隐藏</div>
                        <div class="info_btm">
                          <div
                            v-for="(chItem, cindex) in item.hotWords"
                            :key="cindex"
                          >{{ chItem.name }}</div>
                          <!-- <div>女友</div>
                          <div>超级福利</div>-->
                        </div>
                      </div>
                    </div>
                  </td>
                  <td>{{ item.duration }}</td>
                  <td>{{ item.releaseTime }}</td>
                  <!--  -->
                  <td v-if="item.isPro == 1">{{ format_num(item.volume) }}</td>
                  <td v-else>--</td>
                  <td v-if="item.isPro == 1">{{ format_num(item.amount) }}</td>
                  <td v-else>--</td>
                  <!--  -->
                  <td>{{ item.favoriteCount }}</td>
                  <td>{{ item.commentCount }}</td>
                  <td>{{ item.shareCount }}</td>
                </tr>
              </tbody>
            </table>
            <div class="pageBox" v-if="videoListData.length != 0 && !listLoading">
              <el-pagination
                background
                layout="prev, pager, next, jumper"
                :total="pageTotal"
                :page-size="PageSize"
                :current-page="PageIndex"
                @current-change="get_data"
                :hide-on-single-page="true"
              ></el-pagination>
            </div>
            <div class="empty addTop" v-if="videoListData.length == 0 && !listLoading">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
            <div
              v-loading="listLoading"
              v-if="listLoading"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div>
          </section>
        </div>
      </section>
    </template>
    <div class="vip_pay_box" v-else>
      <div class="vip_bg_box">
        <div class="vip_bg_mask"></div>
      </div>
      <div class="vip_box_wrap">
        <payVip routerName="FansPortrait" :lowestVipNum="vipRootObj[5][125].ownerMinLevel" />
      </div>
    </div>
    <pop
      class="video_detail_pop"
      v-if="dialog"
      v-model="dialog"
      :id="video_id"
      :index="active_name01"
    />
  </div>
</template>

<script>
import PieChart from "./PieChart.vue";
import BarChart from "./BarChart.vue";
import BarChart01 from "./BarChart01.vue";
import KChart from "./KChart.vue";
import pop from "@/pages/meng/video/pop";
import BigPie from "@/pages/wang/talent/tdetails/component/BigPie";
export default {
  components: { PieChart, BarChart, BarChart01, KChart, pop, BigPie },
  data() {
    return {
      dialog: false,
      video_id: "",
      active_name01: "1",
      searchInput: "",
      pickerOptions: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 180 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          ); // 返回 所有时间 大于 当前时间
        },
      },
      KindName: "30天",
      liveTime: "",
      startDate: "",
      endDate: "",

      // 列表传值
      PageIndex: 1,
      PageSize: 9,
      detailVideo: false,
      goodsVideo: false,
      sortValue: 1, //排序 1 发布时间 2 视频时长 3 点赞数量 4 评论数量 5 转发数量
      orderType: 1,

      //页面数据
      videoData: {},
      videoListData: [],
      pageTotal: 0,

      videoEdata: {
        x: [],
        y: [],
      },
      videoPdata: [],
      PraiseData: {
        x: [],
        y1: [],
        y2: [],
      },
      commentData: {
        x: [],
        y1: [],
        y2: [],
      },
      highestData: {},
      loading2: false,
      listLoading: false,
      showPageVip: false,
      vipRootObj: this.$store.state.userRoot, //会员权限对象
    };
  },
  props: {},
  watch: {
    KindName: function (newVal, oldVal) {
      this.getListData();
    },
    detailVideo: function (newVal, oldVal) {
      this.detailVideo = newVal;
      this.PageIndex = 1;
      this.GetVideoList();
    },
    goodsVideo: function (newVal, oldVal) {
      this.PageIndex = 1;
      this.goodsVideo = newVal;
      this.GetVideoList();
    },
  },
  computed: {},
  created() {
    if (this.vipRootObj[5][125].owner) {
      this.getListData();
    }
  },
  mounted() {},
  methods: {
    toValueLink(e) {
      window.open(e);
    },
    // 排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.orderType = 0;
      } else {
        this.orderType = 1;
      }
      this.sortValue = parm02;
      this.PageIndex = 1;
      this.GetVideoList();
    },
    toSearch() {
      this.GetVideoList();
    },
    get_data(e) {
      this.PageIndex = e;
      this.GetVideoList();
    },
    onPick1() {
      this.KindName = "";
      this.getListData();
    },
    getListData() {
      this.searchInput = "";
      switch (this.KindName) {
        case "近7天":
          this.endDate = this.timestamp((Date.now() / 1000) * 1, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 6,
            "Y-M-D"
          );
          break;
        case "30天":
          this.endDate = this.timestamp((Date.now() / 1000) * 1, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 29,
            "Y-M-D"
          );

          break;
        case "90天":
          this.endDate = this.timestamp((Date.now() / 1000) * 1, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 89,
            "Y-M-D"
          );
          break;
        default:
          this.startDate = this.liveTime[0];
          this.endDate = this.liveTime[1];
          break;
      }
      this.liveTime = [this.startDate, this.endDate];
      this.getVideoData();
      this.GetPraiseComment();
      this.GetVideoList();
      this.videoHighest();
    },
    getVideoData() {
      this.loading1 = true;
      this.videoData = {};
      this.$axios
        .post("/api/Aweme/GetAwemeOverView", {
          AuthorId: this.$route.params.id,
          Times: this.startDate + "-" + this.endDate, //时间，默认为30天
        })
        .then((res) => {
          this.loading1 = false;
          if (res.data.code == 0) {
            (this.videoData = res.data.data),
              (this.videoEdata.x = res.data.data.hx);
            this.videoEdata.y = res.data.data.hy;
            this.videoPdata = res.data.data.awemeDurationDistribution;
          }
          // if (res.data.code == 1003) {
          //   this.showPageVip = true;
          // }
        });
    },
    GetPraiseComment() {
      this.loading2 = true;
      this.$axios
        .post("/api/Aweme/GetAwemeFavoriteCommentTrendView", {
          AuthorId: this.$route.params.id,
          Times: this.startDate + "-" + this.endDate, //时间，默认为30天
        })
        .then((res) => {
          this.loading2 = false;
          if (res.data.code == 0) {
            this.PraiseData.x = res.data.data.favoriteDT; //点赞日期
            this.PraiseData.y1 = res.data.data.favoriteInc; //点赞增量
            this.PraiseData.y2 = res.data.data.favoriteC; //点赞数量
            this.commentData.x = res.data.data.commentDT; //评论日期
            this.commentData.y1 = res.data.data.commentInc; //评论增量
            this.commentData.y2 = res.data.data.commentC; //评论数量
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    GetVideoList() {
      this.videoListData = [];
      this.listLoading = true;
      this.$axios
        .post("/api/Aweme/AwemeDetailsGetPageList", {
          AuthorId: this.$route.params.id,
          Times: this.startDate + "-" + this.endDate, //时间，默认为30天
          SearchKeyWord: this.searchInput,
          IsShop: this.goodsVideo ? 1 : 0, //是否仅显示直播带货 1.是 其他值.显示全部
          IsScreenDelete: this.detailVideo ? 1 : 0, //是否屏蔽已删除视频 1.屏蔽 其他值.显示全部
          PageIndex: this.PageIndex, //分页索引
          PageSize: this.PageSize, //分页大小
          SortOrder: this.orderType, //排序 1 发布时间 2 视频时长 3 点赞数量 4 评论数量 5 转发数量
          SortValue: this.sortValue, //排序(0降序1升序)
        })
        .then((res) => {
          this.listLoading = false;
          if (res.data.code == 0) {
            this.videoListData = res.data.data.list;
            this.pageTotal = res.data.data.pageInfo.totalCount;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    videoHighest() {
      this.$axios
        .post("/api/Aweme/GetAwemeDetailsCommentMaxFavoriteOrReply", {
          AuthorId: this.$route.params.id,
          Times: this.startDate + "-" + this.endDate, //时间，默认为30天
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.highestData = res.data.data;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    Routinghop(id) {
      let router = this.$router.resolve({
        path: "/talent_main/videoDetails",
        query: { id },
      });
      window.open(router.href, "_blank");
    },
  },
};
</script>

<style scoped lang="less">
.imgBox {
  border: 1px solid #e5e5e5;
  border-left: 0;
  background: url("../../../../../assets/wang/talentCompare/search-nohover.png")
      no-repeat 10px 7px,
    #fff !important;
  background-size: 15px 15px !important;
}
.imgBox:hover {
  background: url("../../../../../assets/wang/talentCompare/search.png")
      no-repeat 10px 7px,
    #fff !important;
  background-size: 15px 15px !important;
}
.video_detail {
  /deep/.el-dialog__body {
    padding: 30px;
  }
  /deep/.el-tabs__nav-scroll {
    background-color: #fff;
  }
  .video_detail_pop {
    /deep/.is-active {
      background-color: #fd7f2c !important;
    }
    /deep/.el-tabs__item {
      width: auto !important;
      padding: 0 20px !important;
    }
  }

  .vip_pay_box .vip_bg_box {
    background: url("~@/assets/shi/vipLeveBgc4.png") no-repeat;
  }
  .no_data {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #b5b5b5;
  }
  .time_slot {
    // height: 62px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    .tab01 {
      margin-right: 20px;
    }
    /deep/.is-active {
      background-color: #fff !important;
    }
  }
  .live_top {
    display: flex;
    align-items: center;
    color: #222;
    font-weight: 600;
    .line {
      width: 4px;
      height: 16px;
      border-radius: 100px;
      margin-right: 6px;
      background-color: #fd7f2c;
    }
  }
  .detail_first-wrap {
    margin-top: 20px;

    .preview_list {
      display: flex;
      padding: 40px 0 42px;
      flex-wrap: wrap;
      .preview_list-box {
        width: 33%;
        text-align: center;
        // padding-left: 30px;
        box-sizing: border-box;
        div:nth-child(1) {
          font-size: 24px;
          // font-weight: 600;
          font-family: DINAlternate-Bold;
          color: #222;
        }
        div:nth-child(2) {
          font-size: 12px;
          color: #888;
        }
        .time {
          font-size: 16px;
          font-weight: 500;
        }
      }
      .live_list-line {
        width: 1px;
        height: 48px;
        // background-color: #efefef;
      }
    }
  }
  .detail_second-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    .second_left {
      width: 50%;
      .second_left-echart {
        // margin-top: 30px;
        height: 300px;
      }
    }
    .second_right {
      width: 50%;
      .second_right-echart {
        // margin-top: 30px;
        height: 300px;
      }
    }
    .comment {
      width: 100%;
      padding: 0 40px;
      box-sizing: border-box;
      .comment_box {
        width: 100%;
        height: 100px;
        background-color: #f5f5f5;
        border-radius: 6px;
        padding: 15px 20px;
        box-sizing: border-box;
        .comment_box-tit {
          font-size: 14px;
          color: #888888;
        }
        .comment_box-info {
          display: flex;
          padding-top: 10px;
          .info_left {
            width: 66%;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #222222;
            margin-right: 20px;
            img {
              width: 40px;
              height: 40px;
              border-radius: 6px;
              cursor: pointer;
              object-fit: cover;
            }
            .text {
              max-width: 273px;
              margin-left: 10px;
              font-size: 14px;
              color: #222222;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
              cursor: pointer;
            }
            .text:hover {
              color: #fd7f2c;
            }
          }
          .info_right {
            flex: 1;
            display: flex;
            justify-content: space-between;

            img {
              width: 12px;
              height: 10px;
              margin-right: 4px;
              vertical-align: baseline;
            }
            .num-box {
              width: 55px;
              text-align: center;
              .num {
                font-size: 12px;
                color: #888;
                padding-top: 2px;
                // font-family: DINAlternate-Bold;
              }
              .text {
                font-size: 14px;
                color: #222;
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }
  .detail_last-list {
    min-height: 360px;
    .last_list-warp {
      display: flex;
      align-items: center;
      margin-top: 28px;
      .searchBox {
        margin-top: 0 !important;
      }
    }
    .checkbox {
      margin-left: 30px;
    }
  }
  table {
    text-align: center;
    margin-top: 14px;
    thead {
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
        margin-right: 2px;
        cursor: pointer;
      }
      tr {
        th {
          padding: 0 2px;
        }
        th:first-child {
          text-align: left;
          padding-left: 24px;
        }
        th:nth-child(2) th:nth-child(3),
        th:nth-child(4),
        th:nth-child(5),
        th:nth-child(6),
        th:nth-child(7) {
          width: 11%;
        }
        th:nth-child(8) {
          width: 14%;
        }
      }
    }
    tbody {
      tr {
        height: 78px;
        td {
          width: 10%;
          padding: 0 2px;
        }
        // td:nth-child(1),
        td:nth-child(2),
        td:nth-child(3),
        td:nth-child(4),
        td:nth-child(5),
        td:nth-child(6),
        td:nth-child(7) {
          font-family: DINAlternate-Bold;
          font-size: 15px;
          color: #222222;
        }
        td:nth-child(1) {
          width: 25%;
        }
      }
      .rankNum {
        font-size: 15px;
      }
    }
    // 数量
    .numBox {
      span:nth-of-type(1) {
        font-size: 16px !important;
      }
    }
    // 商品

    .rightBox {
      display: flex;
      align-items: center;
      padding-left: 24px;
      .picture {
        width: 50px;
        height: 50px;
        position: relative;
        background-color: #f5f5f5;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 100%;
          height: 100%;
          border-radius: 6px;
          object-fit: cover;
        }
        .detail {
          width: 20px;
          height: 18px;
          border-radius: 0;
        }
        .picture_href {
          width: 100%;
          height: 100%;
          display: inline-block;
          position: absolute;
          top: 0;
          left: 0;
          // transform: translate(-50%,-50%);
          display: none;
          img {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
      .picture:hover {
        .picture_href {
          display: block;
        }
      }
      .info {
        margin-left: 10px;
        text-align: left;
        cursor: pointer;
        .info_top {
          width: 300px;
          min-height: 18px;
          font-size: 14px;
          color: #222222;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
          .info_top-img {
            width: 16px;
            height: 13px;
            vertical-align: inherit;
          }
        }
        .info_top:hover {
          color: #ff924b;
        }
        .info_detail-name {
          width: 88px;
          height: 22px;
          line-height: 22px;
          text-align: center;
          background-color: #f5f5f5;
          border-radius: 4px;
          border: 1px solid #e5e5e5;
          font-size: 12px;
          font-weight: 400;
          color: #888;
          box-sizing: border-box;
        }
        .info_btm {
          min-height: 20px;
          display: flex;
          margin-top: 4px;
          div {
            padding: 2px 8px;
            font-size: 12px;
            color: #fd7f2c;
            box-sizing: border-box;
            margin-right: 6px;
            border-radius: 100px;
            border: solid 1px #fd7f2c;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1400px) {
  #VideoDetail .preview_list {
    padding-top: 20px;
  }
  #VideoDetail .preview_list .preview_list-box {
    width: 33%;
    margin-top: 20px;
  }
  #VideoDetail .preview_list .preview_list-box div:first-child {
    font-size: 20px;
  }
  #VideoDetail .preview_list .live_list-line {
    margin-top: 20px;
  }
}
[ml] {
  margin-left: 4px;
}
.cursor {
  cursor: pointer;
}
.m_t {
  margin-top: 30px;
}
.addTop {
  p {
    color: #b5b5b5;
  }
}
</style>
